/**
Liste des couleurs
Bleu #1779E8
Bleu #00254F
Bleu (Base) #00499C
Maron #4F3300
Orange #9C6500
*/

/******************************************************************************
* Spécifique à toute l'application
******************************************************************************/
body {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  font-family: tahoma,arial,helvetica;
  color: #000000;
  background-color: #B5CFCD;
}

.content {
  background-color: #ffffff;
  margin: 10px 10px;
  padding: 10px;
  border-radius: 5px;
}
/**
* Affichage du contenu (avec la fenetre)
*/
#content {
  width: 65%;
  float: left;
}
#header {
  text-align:center;
}
#header img {
  width: 50%;
}

textarea {
  padding:0px;
  margin-left: 1px;
  padding:3px;
  font-size: 1.2em;
  resize:none;
  
  border:1px solid black;
  border-radius:5px;
  box-shadow:1px 1px 2px grey inset; /* Décalage horizontal, décalage vertical, adoucissement, couleur */

}

/*******************************************************************************
* Titre 
*******************************************************************************/

h1 {
  text-align:center;
  color:orange;
  border-right:1px solid #444;
  border-left:1px solid #444;
  border-top:1px solid #444;
  border-bottom:1px solid #444;
}
h2 {
  display: block;
  text-align: center;
  color: #ffffff;
  background-color: #00254F;
  font-weight: bold;
  border-radius: 5px 5px 0px 0px;
  font-variant: small-caps;
  font-size: 2em;
  margin: -10px;
  padding: 0px;
}
h3 {
  font-size: 1em;
  text-align: center;
  color:  #ffffff;
  background-color: #2A4768;
}
th {
  background-color: #00499C;
  color: white;
  font-variant: small-caps;
  font-weight: bold;
  text-align: center;
}


/*******************************************************************************
 * Menu 
 ******************************************************************************/
.menu {
  margin: 0;
  overflow: hidden;
  background-color: #dae0d2;
  background-image: url(../images/fond.png);
  background-position: bottom;
  background-repeat: repeat-x;
}
.menu ul {
  float: left;
  margin-top: 16px;
  margin-right: 16px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 0px;
  list-style: none;
}
.menu ul li {
  float: left;
  margin-left: 3px;
}
.menu ul li a {
  float: left;
  text-decoration: none;
  letter-spacing: 1px;
  padding-top: 6px;
  padding-right: 10px;
  padding-bottom: 3px;
  padding-left: 0px;
/*  background-image: url(../images/coin-gauche.png);*/
  background-position: 0% -250px;
  background-repeat: no-repeat;
}
.menu ul li.actif {
  float: left;
  text-decoration: none;
  letter-spacing: 1px;
  padding-left: 10px;
/*  background-image: url(../images/coin-gauche.png);*/
  background-position: 0% 0%;
  background-repeat: no-repeat;
}
.menu ul li {
  float: left;
  padding-top: 6px;
  padding-right: 10px;
  padding-bottom: 3px;
  padding-left: 0px;
/*  background-image: url(../images/coin-droit.png);*/
  background-position: 100% -250px;
  background-repeat: no-repeat;
  color: #ffffff;
}
.menu ul li.actif {
  float: left;
  padding-top: 6px;
  padding-right: 10px;
  padding-bottom: 3px;
  padding-left: 0px;
/*  background-image: url(../images/coin-droit.png);*/
  background-position: 100% 0%;
  background-repeat: no-repeat;
  color: #333333;
}
.menu ul li a:hover {
  background-position: 0% -500px;
  text-decoration: underline;
}
.menu ul li a:focus {
  background-position: 0% -500px;
}
.menu ul li a:hover span {
  background-position: 100% -500px;
}
.menu ul li a:focus span {
  background-position: 100% -500px;
}

#clock {
  margin-top: 16px;
  margin-right: 10px;
  float: right;
}

/******************************************************************************
* Main courante
******************************************************************************/

/** description du tableau */
div.maincourante {
  margin: 10px 20px;
/*  border:1px solid black; */
}
  
.corps .ligne form span, .corps .ligne span { /* Correspond à une cellule */
  display:block;
  float:left;
  width:10%;
  height:30px;
  overflow:auto;
  border:1px solid black;
  margin-left: -1px; /** A REVOIR !!! */
  margin-top: -1px;
  padding: 5px 2px 5px 2px;
  line-height: 25px;
  
  word-wrap:break-word;
}

.corps .ligne {
  display: block;
  clear:both;
}

.clear {
  display:block;
  clear:both;
  visibility:hidden;
}

/** on décrit chaque cellule plus précisément */
.corps .ligne form span { /** pour la partie Saisie */
  height: 75px;
  margin: 15px 0px 10px 0px; /* haut droite bas gauche */
  border: none;
/*  background-color: #B5CFCD;*/
}

.corps .ligne .description textarea, .corps .ligne .suite textarea  { /** textarea de la partie saisie */
  width: 97%;
  height: 57%;
}

.corps .ligne .bouton {
  float: right;
  margin-top: -10px;
  margin-bottom: 5px;
  display: none;
  height: auto;
}
.corps .ligne .bouton input { /* bouton "enregistrer" */
  width: 90%;
  height: 30px;
}
.corps .ligne .details {
  font-size: 0.9em;
}

.corps .ligne .heure {
  width: 7%;
  text-align: center;
}
.corps .ligne .description {
  width: 60%;
}
.corps .ligne .suite {
  width: 31%;
}

/** On alterne la couleur de fond */
.couleur1 span {
  background-color: #B5CFCD;
}
.couleur2 span {
  background-color: #7A9FA8;
}

.couleur1 p:hover span, .couleur2 p:hover span {
  background-color: #FFFE4C;
}

/** On change un peu l'en-tête */
.entete span {
  line-height: 30px;
  text-align: center;
  background-color: #00499C;
  
  font-size: 1.2em;
  font-variant: small-caps;
  font-weight: bold;
  color: white;
}

/** on arrondit le bord de la première et de la dernière ligne */
.debuttableau span:nth-child(1){ /** en haut à gauche */
  border-radius : 5px 0px 0px 0px; /* on indique un bord arrondi à partir de en haut à gauche */
}
.debuttableau span:nth-child(3){ /** en haut à droite */
  border-radius : 0px 5px 0px 0px;
}
.fintableau span:nth-last-child(1){ /** en bas à droite */
  border-radius : 0px 0px 5px 0px; 
}
.fintableau span:nth-last-child(3){ /** en bas à gauche */
  border-radius : 0px 0px 0px 5px;
}

/** On place la pagination */
.pagination {
  text-align: center;
/*  line-height: 30px;*/
/*  vertical-align: middle;*/
}


/*******************************************************************************
* Vue simple / vue détaillée
*******************************************************************************/

.vuesimple, .vuedetaillee {
/*  border-collapse: collapse;*/
  border-spacing:0;
  
  float:left;
  text-align:center;
  
  margin-top: -10px;
  margin-right: -10px;
  margin-left: -10px;
  margin-bottom: 5px;
  
  border: 1px solid #444;
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
}

.vuesimple td, .vuedetaillee td {
  padding: 2px;
}

.vuesimple thead tr, .vuedetaillee thead tr {
  line-height: 20px;
  font-size: 1.2em;
}

.unmoyen:hover td {
  background-color: #FFFE4C;
}

/* on paramètre les bordures  */
.vuesimple tbody tr td,.vuedetaillee tbody tr td/*,.vuesimple thead tr th, .vuedetaillee thead tr th,*/  {
  border: 1px solid #444;
}

.vuesimple thead tr:first-child th:first-child, .vuedetaillee thead tr:first-child th:first-child {
  border-radius: 3px 0px 0px 0px;
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px 0px 0px 0px;
}

.vuesimple thead tr:first-child th:last-child, .vuedetaillee thead tr:first-child th:last-child{
  border-radius: 0px 3px 0px 0px;
  -moz-border-radius: 0px 3px 0px 0px; 
  -webkit-border-radius: 0px 3px 0px 0px;
}
/*.vuesimple tbody tr:last-child td:first-child {
  border-radius: 0px 0px 0px 5px;
}

.vuesimple tbody tr:last-child td:last-child {
  border-bottom: none;
  border-radius: 0px 0px 0px 5px;
}*/

/** on paramètre la taille de chaque colonne pour la vue simple */
.vuesimple tbody tr td:nth-child(1), .vuesimple thead tr th:nth-child(1), .vuedetaillee tbody tr td:nth-child(1), .vuedetaillee thead tr th:nth-child(1) { /** 1ère colonne : Libellé */
  width: 25%;
}
.vuesimple tbody tr td:nth-child(2), .vuesimple thead tr th:nth-child(2), .vuedetaillee tbody tr td:nth-child(2), .vuedetaillee thead tr th:nth-child(2) { /** 2ème colonne : indicatif radio */
  width: 15%;
}
.vuesimple tbody tr td:nth-child(3), .vuesimple thead tr th:nth-child(3), .vuedetaillee tbody tr td:nth-child(3), .vuedetaillee thead tr th:nth-child(3) { /** 3ème colonne : type */
  width: 10%;
}
.vuesimple tbody tr td:nth-child(4), .vuesimple thead tr th:nth-child(4), .vuedetaillee tbody tr td:nth-child(4), .vuedetaillee thead tr th:nth-child(4) { /** 4ème colonne : Etat*/
  width: 10%;
}
.vuesimple tbody tr td:nth-child(5), .vuesimple thead tr th:nth-child(5), .vuedetaillee tbody tr td:nth-child(5), .vuedetaillee thead tr th:nth-child(5) { /** 5ème colonne : Commentaire */
  width: 25%;
}
.vuesimple tbody tr td:nth-child(6), .vuesimple thead tr th:nth-child(6) { /** 6ème colonne : action suivante */
  width: 10%;
}
.vuesimple tbody tr td:nth-child(7), .vuesimple thead tr th:nth-child(7) { /** 7ème colonne */
  width: 2.5%;
}
.vuesimple tbody tr td:nth-child(8), .vuesimple thead tr th:nth-child(8) { /** 8ème colonne */
  width: 2.5%;
}
/** pour la vue détaillée, les 5 premières colonnes sont identiques pour les autres : */
.vuedetaillee th, .vuedetaillee td { /* taille de base */
  width: 7%;
}


/** Sous menu */
.submenu {
  margin: 0;
  overflow: hidden;
  width: 100%;
/*  float: left;*/
}
.submenu ul {
  float: left;
  margin-top: 16px;
  margin-right: 16px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 0px;
  list-style: none;
}
.submenu ul li {
  float: left;
  margin-left: 3px;
}

/*******************************************************************************
* Fenetre
*******************************************************************************/
#fenetre {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 10px;
  
  padding-left: 10px;
  width: 32%;
  min-height: 100px;
  max-height:100%;
  float:right;
  background-color: #ffffff;
  
  border: 3px solid #00254F;
  border-radius: 5px;
}

#fenetre.content {
  padding: 0;
  padding-left: 5px;
  padding-right: 5px;
}

#fenetre .loader img {
  position: absolute;
  right: 15px;
}

#fenetre h2 {
  margin: 0;
  font-size: 1.5em;
  margin-left: -5px;
  margin-right: -5px;
  border-radius: 0;
}

.container_canvas {
  float:right;
  position: absolute;
  margin-right: 15px;
}

#fenetre h3 {
  margin-top: 5px;
  margin-bottom: 5px;
}

#fenetre table {
  width: 100%;
  border-collapse: collapse;
}

#fenetre form table {
  margin-left: -5px;
  margin-right: -5px;
}

#fenetre table td, #fenetre table th {
  width: 20%;
}

#fenetre td {
  padding: 5px;
  text-align: center;
}
#fenetre .interventions td {
  padding: 10px;
  font-size: 1.2em;
}
#fenetre .infocontact td:first-child {
  font-weight: bold;
}

#fenetre .details_div {
  margin-bottom: 20px;
  margin-left: -5px;
  margin-right: -5px;
}

#fenetre .details_div.saisie {
  margin-left: 10px;
  margin-right: 10px;
}
#fenetre .details_div.saisie textarea {
  width: 100%;
}
#fenetre .details_div.saisie button {
  float: right;
  margin-right: -10px;
}

/** Bordure */
#fenetre tr:first-child th:first-child {
  border-radius: 5px 0px 0px 0px;
}
#fenetre tr:first-child th:last-child {
  border-radius: 0px 5px 0px 0px;
}
#fenetre tr:last-child td:last-child {
  border-radius: 0px 0px 5px 0px;
}
#fenetre tr:last-child td:first-child {
  border-radius: 0px 0px 0px 5px;
}

/* fond alterné */
#fenetre tr:nth-child(odd) td {
  background-color: #7A9FA8;
}
#fenetre tr:nth-child(even) td {
  background-color: #B5CFCD;
}
#fenetre form tfoot td:last-child {
  background-color: #ffffff;
}

#fenetre .details_div .derniersetats td:first-child,#fenetre .details_div .derniersetats th:first-child  {
  width: 10%;
}
#fenetre .details_div .derniersetats td {
  border: 1px solid #00254F;
}
#fenetre .details_div .derniersetats td:last-child {
  text-align: left;
}